// 获取节点
// 获取节点
// 获取文章
const postsContainer = document.getElementById("posts-container");
// 获取加载更多的动画效果
const loading = document.querySelector(".loader");
//获取搜索的输入框
const filter = document.getElementById("filter");

// 全局准备好我的分页接口的参数
 let limit = 5;  // 每一页的文章数量
 let page = 1;//页码

 //使用fetch去请求文章接口拿到第一页的文章数据
 //async + await es7 promise 语法糖
async function getPosts(){
   const res = await fetch(`http://jsonplaceholder.typicode.com/posts?_limit=${limit}&_page=${page}`
   );
   const data  = await res.json()
   console.log('我是请求回来的数据',data)
   return data
}
// function getPosts(){
//     fetch(`http://jsonplaceholder.typicode.com/posts?_limit=${limit}&_page=${page}`)
//    .then(res=>res.json())
//    .then(data=>console.log(data))
//    .catch(err=>console.log(err))

// }

// 拿到文章数据之后 要处理数据  渲染数据到页面上
async function showPosts(){
    const posts = await getPosts();
    // 遍历请求回来的数据 动态生成文章 然后插入页面

    posts.forEach(post => {
         
    //     <div class="post">
    //     <div class="number">2</div>
    //     <div class="post-info">
    //       <h2 class="post-title">第二篇</h2>
    //       <p class="post-body">
    //         quia et suscipit suscipit recusandae consequuntur expedita 
    //         et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto
    //       </p>
    //     </div>
    //   </div>
    const postEl = document.createElement("div")
    postEl.classList.add("post")
    postEl.innerHTML = `<div class="number">${post.id}</div>
       <div class="post-info">
        <h2 class="post-title">${post.title}</h2>
       <p class="post-body">${post.body}</p>
    </div>`
    // 
    postsContainer.appendChild(postEl)
 });
}
// getPosts();

//showLoading 控制加载动画的显示隐藏 请求数据的时候显示  
//请求完成的时候隐藏
function showLoading() {
   loading.classList.add("show");
   setTimeout(() => {
     loading.classList.remove("show");
   //   每次触底调用我这个showLoading
     setTimeout(() => {
       page++;
       showPosts();
     }, 300);
   }, 1000);
 }
 // filterPosts 根据用户输入的关键字 然后进行匹配过滤/显示隐藏文章数据
function filterPosts(e){
   // term 拿到的是输入的关键字
   const term = e.target.value.toUpperCase();
   //拿到所有的文章博文
   const posts = document.querySelectorAll(".post");
 
   //遍历每一篇文章
   posts.forEach(post => {
     //获取每一篇文章的title
     const tilte = post.querySelector(".post-title").innerText.toUpperCase();
     // 获取到每一篇文章的内容
     const body = post.querySelector(".post-body").innerText.toUpperCase();
     //判断文章的title和内容是否含有关键字
     if (tilte.indexOf(term) > -1 || body.indexOf(term) > -1) {
       // 匹配的文章就显示出来
       post.style.display = "flex";
     } else {
       //不匹配的 就隐藏
       post.style.display = "none";
     }
   });
 }
 
showPosts();

// 滚动条事件监听
window.addEventListener("scroll",()=>{
   // 判断是否触底 触底了就调用showLoading
    //clientHeight 是视口的高度
   //scrollHeight 元素内容的高度
   // scrollTop滚动条距离
    // 触底无限加载核心：scrollTop + clientHeight >= scrollHeight
     // 对象解构语法
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  if (scrollTop + clientHeight >= scrollHeight - 5) {
   // 触底了 先显示加载动画 再发送请求 请求回来后把动画关闭
   showLoading();
  }

})




